<template>
  <div class="pro-form-container">
    <a-form ref="formRef" :model="formData">
      <a-row :gutter="{ xs: 8, sm: 16, md: 24 }">
        <a-col v-for="eachColumn in columns" :key="eachColumn.dataIndex" :span="eachColumn.colSpan">
          <a-form-item
            v-if="!eachColumn.hideInForm"
            :label="eachColumn.title"
            :labelCol="labelCol"
            :name="eachColumn.dataIndex"
            :rules="eachColumn.rules"
            :colon="eachColumn.title && eachColumn.title!.toString().trim() !== ''"
          >
            <create-component
              v-if="checkedValueType.includes(eachColumn.valueType!)"
              :column="eachColumn"
              v-model:checked="formData[`${eachColumn.dataIndex}`]"
            />
            <create-component
              v-else
              :column="eachColumn"
              v-model:value="formData[`${eachColumn.dataIndex}`]"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="pro-form-button-container">
      <a-space>
        <a-button
          v-for="(eachButton, index) in formButtons"
          :key="`formButton-${index}`"
          :type="eachButton.type || 'default'"
          @click="eachButton.onClick"
          >{{ eachButton.text }}</a-button
        >
        <a-button v-if="showResetButton" @click="onReset">重置</a-button>
        <a-button v-if="showSubmitButton" type="primary" @click="onSubmit">{{
          submitText ?? '提交'
        }}</a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ColumnType } from '../pro-table/typing';
import { ref } from 'vue';
import CreateComponent from '../create-component';
import './type';
import { FormButtonType } from './type';
import { watch } from 'vue';

const props = defineProps({
  columns: Array<ColumnType>,
  model: Object,
  labelCol: Object,
  formButtons: Array<FormButtonType>,
  submitText: String,
  showResetButton: Boolean,
  showSubmitButton: Boolean,
});

const emits = defineEmits(['update:model', 'submit', 'reset']);
const { columns, model, labelCol, submitText } = props;
const formRef = ref();
const formData = model ?? {};
const checkedValueType = ['checkbox', 'radio', 'switch'];

const setFormData = () => {
  columns?.forEach(eachColumn => {
    const objectKey: string = eachColumn.dataIndex as string;

    watch(
      () => eachColumn.value,
      newValue => {
        formData[objectKey] = newValue;
      },
    );

    if (eachColumn.hideInForm) {
      return;
    }

    formData[objectKey] = eachColumn.value;
    eachColumn.rules?.forEach(eachRule => {
      eachRule.transform = () => formData[objectKey];
    });
  });
};

const onReset = () => {
  formRef.value.resetFields();
  emits('reset');
};
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      emits('submit', formData);
    })
    .catch(() => {
      // console.log('error', error);
    });
};

setFormData();
</script>

<style lang="css">
.pro-form-button-container {
  text-align: center;
}
</style>
